import React, { Component } from 'react'
import '../assets/css/index.css'
import {getNewList,getGrouponList,getSeckillList,getIndexGoodsList} from '../request/index'
export default class index extends Component {

    state = {
        new_list: [],
        groupon_list: [],
        seckill_list: [],
        indexgoods: [
            {content:[]},
            {content:[]},
            {content:[]},
            {content:[]}
        ],
        index:0,
    }
    UNSAFE_componentWillMount() {
        getNewList().then(
            res => {
                if (res.code === 200) {
                    this.setState({ new_list: res.list })
                }
            }
        )
        getGrouponList().then(
            res => {
                if (res.code === 200) {
                    this.setState({ groupon_list: res.list })
                }
            }
        )
        getSeckillList().then(res=>{
            if(res.code===200){
                this.setState({seckill_list:res.list})
            }
        })
        getIndexGoodsList().then(res => {
            if (res.code === 200) {
                this.setState({ indexgoods: res.list })
            }
        })
    }
    render() {
        return (
            <>
                <div className="container">
                    <div className="header">
                        <img src="/assets/image/logo.png" alt="" />
                        <form>
                            <input type="text" placeholder="搜索商品" />
                            <button type="button">搜索</button>
                        </form>
                    </div>
                    {/* <!-- 新人专享 --> */}
                    <div className="middle">
                        <div className="xrzx">
                            <div className="clearfix top">
                                <h2 className="ft">新人专享</h2>
                                <a href="#/" className="rt">查看全部</a>
                            </div>
                        </div>

                        <div className="xrzx1">
                            <p>
                                <span>1重礼</span>
                                <span>新人特价商品专区</span>
                                <span>（限量供应，先到先得）</span>
                            </p>

                            <div className="look">
                                <ul>
                                    {
                                        this.state.new_list.map(item => {
                                            return <li key={item.id}>
                                                <img src={this.$static_url + item.img} alt="" />
                                                <span className="now">￥{item.price}</span>
                                                <span className="pri">￥{item.market_price}</span>
                                            </li>
                                        })
                                    }

                                </ul>
                            </div>

                        </div>
                        <div className="xrzx2">
                            <p>
                                <span>2重礼</span>
                                <span>新人通用50元礼券（下单立减，省了又省）</span>
                            </p>
                            <div>
                                <img className="yh1" src="/assets/image/yh.png" alt="" />
                                <img className="yh2" src="/assets/image/yh2.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div className="middle-nav box">
                        <ul>
                            <li>
                                <a href="#/">
                                    <img src="/assets/image/seckill.png" alt="" />
                                    <p>限时秒杀</p>
                                </a>
                            </li>
                            <li>
                                <a href="#/">
                                    <img src="/assets/image/top.png" alt="" />
                                    <p>畅销商品</p>
                                </a>
                            </li>
                            <li>
                                <a href="#/">
                                    <img src="/assets/image/brand.png" alt="" />
                                    <p>品质大牌</p>
                                </a>
                            </li>
                            <li>
                                <a href="#/">
                                    <img src="/assets/image/selfsupport.png" alt="" />
                                    <p>小u自营</p>
                                </a>
                            </li>
                            <li>
                                <a href="#/">
                                    <img src="/assets/image/integral.png" alt="" />
                                    <p>积分商城</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    {/* <!-- 万人团 --> */}
                    <div className="ms">
                        <div className="cjms">
                            <div className="top">
                                <h2 className="ft">万人团</h2>
                            </div>
                            {
                                this.state.groupon_list.map(item => {
                                    return <div className="content" key={item.id}>
                                        <img src={this.$static_url + item.img} alt="" />
                                        <div>
                                            <span>7.9折</span>
                                            <p>{item.goodsname}......</p>
                                            <b>每人限购1件</b>
                                            <p><b>￥{item.price}</b><u>￥{item.market_price}</u></p>
                                        </div>
                                    </div>
                                })
                            }


                        </div>
                        {/* <!-- 限时秒杀 --> */}

                        <div className="xsms">
                            <p>
                                <span>限时秒杀</span>
                                <span>新人特价商品专区</span>
                                <span>（限量供应，先到先得）</span>
                            </p>
                            <div className="look">
                                <ul>
                                    {
                                        this.state.seckill_list.map(item => {
                                            return <li key={item.id}>
                                                <img src={this.$static_url + item.img} alt="" />
                                                <span className="now">￥{item.price}</span>
                                                <span className="pri">￥{item.market_price}</span>
                                            </li>
                                        })
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="two11">
                        <div className="one">
                            <h3>双11尖货预约</h3>
                            <img src="/assets/image/11.png" alt="" />
                        </div>
                        <div className="three">
                            <h3>畅购全球</h3>
                            <img src="/assets/image/cg1.png" alt="" />
                            <img src="/assets/image/cg2.png" alt="" />
                        </div>
                    </div>
                    {/* <!-- 首页推荐 --> */}
                    <div className='nav'>
                        <ul>
                            <li className={this.state.index === 0 ? "active" : ""} onClick={() => this.setState({ index: 0 })}>
                                <p>热销好货</p>
                                <span>限量抢购</span>
                            </li>
                            <li className={this.state.index === 1 ? "active" : ""} onClick={() => this.setState({ index: 1 })}>
                                <p>折上折区</p>
                                <span>不买就亏</span>
                            </li>
                            <li className={this.state.index === 2 ? "active" : ""} onClick={() => this.setState({ index: 2 })}>
                                <p>时令水果</p>
                                <span>当季限定</span>
                            </li>
                            <li className={this.state.index === 3 ? "active" : ""} onClick={() => this.setState({ index: 3 })}>
                                <p>粮油调味</p>
                                <span>一键购齐</span>
                            </li>
                        </ul>
                    </div>
                    <div className="main">
                        {
                            this.state.indexgoods[this.state.index].content.map(item => {
                                return <div className="item clearfix" key={item.id}>
                                    <div className="pic ft">
                                        <img src={this.$static_url + item.img} alt="" />
                                    </div>
                                    <div className="intro ft">
                                        <span>7.9折</span>
                                        <p>{item.goodsname}......</p>
                                        <u>￥{item.price}</u>
                                        <u>￥{item.market_price}</u>
                                        <button>加入购物车</button>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </>
        )
    }
}
